{{define "pills_contacts_tab"}}
<div>
    <div class="p-4">
        <div class="user-chat-nav float-right">
            <div data-toggle="tooltip" data-placement="bottom" title="添加联系人">
                <!-- Button trigger modal -->
                <button type="button" class="btn btn-link text-decoration-none text-muted font-size-18 py-0" data-toggle="modal" data-target="#addContact-exampleModal">
                    <i class="ri-user-add-line"></i>
                </button>
            </div>
        </div>
        <h4 class="mb-4">联系人</h4>

        <!-- Start Add contact Modal -->
        <div class="modal fade" id="addContact-exampleModal" tabindex="-1" role="dialog" aria-labelledby="addContact-exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title font-size-16" id="addContact-exampleModalLabel">添加联系人</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body p-4">
                        <form>
                            <div class="form-group mb-4">
                                <label for="addcontactemail-input">邮箱</label>
                                <input type="email" class="form-control" id="addcontactemail-input" placeholder="Enter Email">
                            </div>
                            <div class="form-group">
                                <label for="addcontact-invitemessage-input">邀请信息</label>
                                <textarea class="form-control" id="addcontact-invitemessage-input" rows="3" placeholder="Enter Message"></textarea>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Add contact Modal -->

        <div class="search-box chat-search-box">
            <div class="input-group bg-light  input-group-lg rounded-lg">
                <div class="input-group-prepend">
                    <button class="btn btn-link text-decoration-none text-muted pr-1" type="button">
                        <i class="ri-search-line search-icon font-size-18"></i>
                    </button>
                </div>
                <input type="text" class="form-control bg-light " placeholder="搜索人员..">
            </div>
        </div>
        <!-- End search-box -->
    </div>
    <!-- end p-4 -->

    <!-- Start contact lists -->
    <div class="p-4 chat-message-list chat-group-list" data-simplebar>

        <div>
            <div class="p-3 font-weight-bold text-primary">
                A
            </div>

            <ul class="list-unstyled contact-list">
                {{range $user := .users }}
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">{{.UserName}}</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">分享 <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">删除 <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
               {{end}}
            </ul>
        </div>
        <!-- end contact list A -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                C
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">常伟</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- end contact list C -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                D
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">稻香村</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">妲己</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list D -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                I
            </div>

            <ul class="list-unstyled contact-list">

                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">爱基利亚</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- end contact list I -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                J
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">冀翔</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">金鑫</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">季飞</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- end contact list J -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                M
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">马振州</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">马洪玉</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">曼玉竹/h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list M -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                O
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">欧阳锋</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list O -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                P
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">裴亚斌</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">沛丰</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list P -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                R
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">任彩霞</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list R -->

        <div class="mt-3">
            <div class="p-3 font-weight-bold text-primary">
                S
            </div>

            <ul class="list-unstyled contact-list">
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">宋雨霏</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">桑胜亮</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="media align-items-center">
                        <div class="media-body">
                            <h5 class="font-size-14 m-0">石彩霞</h5>
                        </div>

                        <div class="dropdown">
                            <a href="#" class="text-muted dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="ri-more-2-fill"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="#">Share <i class="ri-share-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Block <i class="ri-forbid-line float-right text-muted"></i></a>
                                <a class="dropdown-item" href="#">Remove <i class="ri-delete-bin-line float-right text-muted"></i></a>
                            </div>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
        <!-- end contact list S -->
    </div>
    <!-- end contact lists -->
</div>
{{end}}